<script setup>
import { ref, watch } from 'vue';
import { BookService } from '../services/BookService';
import { Book } from '../models/Book';

const props = defineProps({
  isbn: {
    type: String,
    default: ''
  },
  show: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:show', 'close']);

const loading = ref(false);
const book = ref(new Book());
const error = ref('');

// 监听ISBN变化，加载图书详情
watch(() => props.isbn, async (newIsbn) => {
  if (newIsbn && props.show) {
    await loadBookDetails(newIsbn);
  }
});

// 监听show变化，加载图书详情
watch(() => props.show, async (newShow) => {
  if (newShow && props.isbn) {
    await loadBookDetails(props.isbn);
  }
});

// 加载图书详情
const loadBookDetails = async (isbn) => {
  loading.value = true;
  error.value = '';
  
  try {
    const result = await BookService.getBookByIsbn(isbn);
    book.value = result;
  } catch (err) {
    error.value = '无法加载图书详情: ' + err;
    console.error('加载图书详情失败:', err);
  } finally {
    loading.value = false;
  }
};

// 关闭抽屉
const closeDrawer = () => {
  emit('update:show', false);
  emit('close');
};
</script>

<template>
  <n-drawer :show="props.show" :width="500" :placement="'right'" @update:show="(v) => emit('update:show', v)">
    <n-drawer-content :title="'图书详情'" closable @close="closeDrawer">
      <n-spin :show="loading">
        <div v-if="error" class="error-container">
          <n-alert type="error" :title="'加载失败'" :show-icon="true">{{ error }}</n-alert>
        </div>
        
        <div v-else-if="book && book.isbn" class="book-detail">
          <n-descriptions label-placement="left" bordered :column="1">
            <n-descriptions-item label="ISBN">
              {{ book.isbn }}
            </n-descriptions-item>
            <n-descriptions-item label="书名">
              {{ book.title }}
            </n-descriptions-item>
            <n-descriptions-item label="作者">
              {{ book.author || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="出版社">
              {{ book.publisher || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="出版年份">
              {{ book.publicationDate || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="出版地">
              {{ book.placeOfPublication || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="尺寸">
              {{ book.size || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="分类号">
              {{ book.classificationNo || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="主题">
              {{ book.subject || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="丛书">
              {{ book.series || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="书目号">
              {{ book.requisitionNo || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="页数">
              {{ book.pageNo || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="价格">
              {{ book.price || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="条形码号">
              {{ book.barcodeNo || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="当前位置">
              {{ book.currentLocation || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="备用位置">
              {{ book.currentLocation2 || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="藏书状态">
              {{ book.collectionStatus || '未知' }}
            </n-descriptions-item>
            <n-descriptions-item label="流通类别">
              {{ book.circulationCategory || '未知' }}
            </n-descriptions-item>
          </n-descriptions>
        </div>
        
        <div v-else class="empty-container">
          <n-empty description="未找到图书信息" />
        </div>
      </n-spin>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped>
.error-container {
  padding: 16px 0;
}

.empty-container {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

.book-detail {
  padding: 8px 0;
}
</style>
